<style>
  .arrow{
    position: fixed;
    bottom:20px;
    right:40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: black;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    display: none;
    /*transition: all .6s linear;*/
  }
  .arrow:hover{
    background: gray;
  }
</style>
<div class="arrow"><i class="iconfont icon-jiantoushangsheng" style="font-size:35px;color:white;"></i></div>
<script>
  (function(){

    function debounce(fn,time){
      var timer = null
      var args = arguments
      return function(){
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
          fn.apply(this,args)
        },500 || time)
      }
    }

    if($(window).scrollTop() > 300){
      $('.arrow').fadeOut()
    }
    $(window).scroll(debounce(function(){
      var top = $(this).scrollTop()
      //console.log(top)
      if(top > 300){
        $('.arrow').fadeIn('slow')
      }else{
        $('.arrow').fadeOut('slow')
      }
    }))
    
    $('.arrow').click(function(){
      //finish()防止多次点击触发bug
      $('html,body').finish().animate({
        "scrollTop":0
      },400)
    })
  })()
</script>